<template>
	<view class="bodyView" :data-theme="dataTheme">
		<view class="producView">
			<loadingCom style="border-radius: 40px 40px 0 0;" v-if="showLoading"></loadingCom>
			<view class="top">
				<view class="back" @click="handleBack">
					<image class="topImg" src="@/static/icons/arrowLeft.png" mode=""></image>
				</view>
				<view class="back">
					<image class="topImg" src="@/static/icons/share.png" mode=""></image>
				</view>
			</view>
			<view class="producImg" :style="`background-image:url(./static/cake/${producDetail?.image});`">

			</view>

			<view class="nameRate">
				<view class="name">
					{{producDetail?.text}}<text>￥{{producDetail?.price}}</text>
				</view>
				<view class="rate">
					<image class="rateImg" src="../static/icons/star.png"></image>
					<text>{{producDetail?.rate}}</text>
				</view>
			</view>
			<view class="des">
				{{producDetail?.des}}
			</view>

			<text class="commentTitle">留言</text>
			<template v-if="commentList.length==0">
				<image class="noComment" src="@/static/icons/nocomment.png"></image>
				暂无留言
			</template>

			<template v-else>
				<scroll-view class="commentScroll" scroll-y="true">
					<view v-for="item,index in commentList" :key="`comment${index}`" class="coomentItem">
						<view class="avart">
							匿名用户:
						</view>
						<view class="content">
							{{item.content}}
						</view>
						<view class="bottomInfo">
							<view>评分{{item.rate}}</view>
							<view>{{item.dateTime}}</view>
						</view>
					</view>
				</scroll-view>
			</template>


			<view class="orderButton">
				<uni-number-box v-model="orderCount"></uni-number-box>
				<view class="order" @click="handleAddPro">
					{{producDetail?.sellOut?'售罄':'添加到购物车'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		backgroundImg,
		autoimg
	} from "@/utils/tool.js"
 
	import useProductStore from '@/store/modules/product'
	const productStore = useProductStore()
	const {
		products,
		comments
	} = storeToRefs(productStore);
	import useSystemStore from '@/store/modules/system'
	const systemStore = useSystemStore()
	const {
		dataTheme,
		addOrder
	} = storeToRefs(systemStore);
	const emit = defineEmits(['update:modelValue']);
	const props = defineProps({
		/**产品id */
		modelValue: {
			type: Number,
			default: 0
		},
	})
	const _id = computed({
		get: () => {
			return props.modelValue
		},
		set: (val) => {
			emit('update:modelValue', val)
		}
	});
	//产品详情
	let producDetail = ref(null)
	//评论详情
	let commentList = ref([])
	watch(_id, (nval) => {
		if (nval > 0) {
			console.log(234234);
			producDetail.value = products.value.find(row => row.id == nval)
			commentList.value = comments.value.filter(row => row.proId == nval)

		} else {
			producDetail.value = null
			commentList.value = []
		}

	}, {
		immediate: true
	})
	//是否显示loading
	let showLoading = ref(false)
	//订单数量
	let orderCount = ref(1)



	onBackPress(() => {
		// 处理侧滑返回逻辑
		uni.$emit('showProDetail', null)
		//阻止默认行为
		return true
	})
	onUnload(() => {
		console.log("13213123123123123");
		// 处理侧滑返回逻辑
		uni.$emit('showProDetail', null)
		//阻止默认行为
		return false
	})
	//添加产品
	let handleAddPro = () => {
		if (producDetail.value.sellOut)
			return
		showLoading.value = true
		systemStore.addOrder({
			...producDetail.value,
			count: orderCount.value
		}).then(data => {
			setTimeout(() => {
				showLoading.value = false
				uni.$emit('showToast',{
					title: '添加成功！'
				})
				handleBack()
			}, 2000)
		})
	}
	//关闭弹框
	let handleBack = () => {
		uni.$emit('showProDetail', null)
	}
</script>

<style lang="scss" scoped>
	.bodyView {
		width: 100vw;
		height: 90vh;
	}

	.producView {
		box-sizing: border-box;
		border-radius: 40px 40px 0 0;
		height: 100%;
		padding: 20rpx $mainPadding;
		position: relative;

		@include useTheme {
			background-color: getValue("bgColor");
			color: getValue("textColor");
		}

		@include flex-teng(column, flex-start);

		.top {
			width: 100%;
			@include flex-teng(row, space-between);

			.back {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;

				@include flex-teng;

				@include useTheme {
					background-color: getValue("bottombgColor");
				}

				.topImg {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.producImg {
			width: 100%;
			height: 462rpx;
			border-radius: 40rpx;
			margin-top: 20rpx;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}

		.nameRate {
			padding-top: 20rpx;
			width: 100%;
			@include flex-teng(row, space-between);

			.name {
				font-size: $fontSize_Big;
			}

			.rate {
				@include flex-teng(row, center, flex-end);

				.rateImg {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}
		}

		.des {
			width: 100%;
			margin-top: 20rpx;
			word-break: break-all;
			line-height: 40rpx;
		}

		.orderButton {
			position: absolute;
			box-sizing: border-box;
			width: 90vw;
			height: 140rpx;
			background-color: $mainColor;
			bottom: 80rpx;
			border-radius: 40rpx;
			@include flex-teng(row, space-between);
			padding: 0 $mainPadding;

			.order {
				font-size: $fontSize;
			}
		}

		.noComment {
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			width: 160rpx;
			height: 160rpx;
		}

		.commentTitle {
			margin-top: $mainPadding;
			margin-bottom: 20rpx;
			font-size: $fontSize;
		}

		.commentScroll {

			width: 100%;
			height: calc(30vh - 170rpx);

			.coomentItem {
				@include flex-teng(column, flex-start, flex-start);
				padding: 0 20rpx 20rpx 40rpx;

				.content {
					padding-top: 10rpx;
					padding-left: $mainPadding;
					word-break: break-all;
					line-height: 40rpx;
				}

				.bottomInfo {
					width: 100%;
					font-size: $fontSize3;
					padding-left: $mainPadding;
					@include flex-teng(row, space-between);

					@include useTheme {
						color: getValue('textColor2');
					}
				}
			}
		}
	}
</style>